 <template>
  <div>
    <nav-bar :options="navBarOptions" @toInfo="toInfo" />
    <div class="content">
      <div class="brand">
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.agentName+'('+form.agentNo+')'"
          input-align="right"
          type="number"
          label="代理商"
          placeholder="请选择"
          :disabled="true"
        />
        <!-- <van-field
          readonly
          clickable
          name="picker"
          :value="form.brandName"
          input-align="right"
          type="number"
          label="品牌"
          placeholder="请选择"
          :disabled="true"
        /> -->
        
      </div>
      <van-form ref="vanForm">
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="普通刷卡费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              v-if="!isSet"
            />
            <p class="title-i" v-if="isSet">普通刷卡费率</p>
          </div>
          <div class="input-box">
            <van-field
              v-model="form.posDebitRate"
              :label="getStr('posDebitRate','借记卡费率')"
              :placeholder="getStr('posDebitRate')"
              input-align="right"
              type="number"
              :rules="rules.posDebitRate"
            >
              <template #right-icon>
                <span>{{ getUnit("posDebitRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.posDebitAdd"
              :label="getStr('posDebitAdd','借记卡笔数费')"
              :placeholder="getStr('posDebitAdd')"
              input-align="right"
              type="number"
              :rules="rules.posDebitAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("posDebitAdd") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.posDebitLimit"
              :label="getStr('posDebitLimit','借记卡封顶')"
              :placeholder="getStr('posDebitLimit')"
              input-align="right"
              type="number"
              :rules="rules.posDebitLimit"
            >
              <template #right-icon>
                <span>{{ getUnit("posDebitLimit") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.posCreditRate"
              :label="getStr('posCreditRate','贷记卡费率')"
              :placeholder="getStr('posCreditRate')"
              input-align="right"
              type="number"
              :rules="rules.posCreditRate"
            >
              <template #right-icon>
                <span>{{ getUnit("posCreditRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.posCreditAdd"
              :label="getStr('posCreditAdd','贷记卡笔数费')"
              :placeholder="getStr('posCreditAdd')"
              input-align="right"
              type="number"
              :rules="rules.posCreditAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("posCreditAdd") }}</span>
              </template>
            </van-field>
          </div>
        </div>

        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="云闪付费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              v-if="!isSet"
            />
            <p class="title-i" v-if="isSet">云闪付费率</p>
          </div>
          <div class="input-box">
            <van-field
              v-model="form.ysfRate"
              :label="getStr('ysfRate','云闪付费率')"
              :placeholder="getStr('ysfRate')"
              input-align="right"
              type="number"
              :rules="rules.ysfRate"
            >
              <template #right-icon>
                <span>{{ getUnit("ysfRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.ysfAdd"
              :label="getStr('ysfAdd','云闪付笔数费')"
              :placeholder="getStr('ysfAdd')"
              input-align="right"
              type="number"
              :rules="rules.ysfAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("ysfAdd") }}</span>
              </template>
            </van-field>
          </div>
        </div>
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="扫码费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              v-if="!isSet"
            />
            <p class="title-i" v-if="isSet">扫码费率</p>
          </div>
          <div class="input-box">
            <van-field
              v-model="form.scanRate"
              :label="getStr('scanRate','扫码费率')"
              :placeholder="getStr('scanRate')"
              input-align="right"
              type="number"
              :rules="rules.scanRate"
            >
              <template #right-icon>
                <span>{{ getUnit("scanRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.scanAdd"
              :label="getStr('scanAdd','扫码笔数费')"
              :placeholder="getStr('scanAdd')"
              input-align="right"
              type="number"
              :rules="rules.scanAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("scanAdd") }}</span>
              </template>
            </van-field>
          </div>
        </div>

        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="VIP刷卡费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              v-if="!isSet"
            />
            <p class="title-i" v-if="isSet">VIP刷卡费率</p>
          </div>
          <div class="input-box">
            <van-field
              v-model="form.vipDebitRate"
              :label="getStr('vipDebitRate','借记卡费率')"
              :placeholder="getStr('vipDebitRate')"
              input-align="right"
              type="number"
              :rules="rules.vipDebitRate"
            >
              <template #right-icon>
                <span>{{ getUnit("vipDebitRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.vipDebitAdd"
              :label="getStr('vipDebitAdd','借记卡笔数费')"
              :placeholder="getStr('vipDebitAdd')"
              input-align="right"
              type="number"
              :rules="rules.vipDebitAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("vipDebitAdd") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.vipDebitLimit"
              :label="getStr('vipDebitLimit','借记卡封顶')"
              :placeholder="getStr('vipDebitLimit')"
              input-align="right"
              type="number"
              :rules="rules.vipDebitLimit"
            >
              <template #right-icon>
                <span>{{ getUnit("vipDebitLimit") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.vipCreditRate"
              :label="getStr('vipCreditRate','贷记卡费率')"
              :placeholder="getStr('vipCreditRate')"
              input-align="right"
              type="number"
              :rules="rules.vipCreditRate"
            >
              <template #right-icon>
                <span>{{ getUnit("vipCreditRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.vipCreditAdd"
              :label="getStr('vipCreditAdd','贷记卡笔数费')"
              :placeholder="getStr('vipCreditAdd')"
              input-align="right"
              type="number"
              :rules="rules.vipCreditAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("vipCreditAdd") }}</span>
              </template>
            </van-field>
          </div>
        </div>
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="快捷支付费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              v-if="!isSet"
            />
            <p class="title-i" v-if="isSet">快捷支付费率</p>
          </div>
          <div class="input-box">
            <van-field
              v-model="form.qpayRate"
              :label="getStr('qpayRate','支付费率')"
              :placeholder="getStr('qpayRate')"
              input-align="right"
              type="number"
              :rules="rules.qpayRate"
            >
              <template #right-icon>
                <span>{{ getUnit("qpayRate") }}</span>
              </template>
            </van-field>
            <van-field
              v-model="form.qpayAdd"
              :label="getStr('qpayAdd','支付笔数费')"
              :placeholder="getStr('qpayAdd')"
              input-align="right"
              type="number"
              :rules="rules.qpayAdd"
            >
              <template #right-icon>
                <span>{{ getUnit("qpayAdd") }}</span>
              </template>
            </van-field>
          </div>
        </div>
      </van-form>
      <van-button class="sure" round block type="info" @click="handleSure"
        >确认修改</van-button
      >
    </div>
    <!-- <van-popup v-model="brandP" position="bottom">
      <van-picker
        show-toolbar
        title="品牌"
        :columns="brandList"
        @confirm="brandChoose"
        value-key="brandName"
      />
    </van-popup> -->
  </div>
</template>
 
 <script>
import { signInfo } from "_a/traditionalV1/signInfo";
import {
  configureList,
  updateInfo,
  addInfo,
} from "_a/traditionalV1/agentUnderRateList";
import rateScopeData from "_c/utils/rateScopeData";

export default {
  data() {
    return {
      navBarOptions: {
        backPrevPage: true,
      },
      form: {},
      rules: {
        posDebitRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "posDebitRate",
          },
        ],
        posDebitAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "posDebitAdd",
          },
        ],
        posDebitLimit: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "posDebitLimit",
          },
        ],
        posCreditRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "posCreditRate",
          },
        ],
        posCreditAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "posCreditAdd",
          },
        ],
        ysfRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "ysfRate",
          },
        ],
        ysfAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "ysfAdd",
          },
        ],
        scanRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "scanRate",
          },
        ],
        scanAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "scanAdd",
          },
        ],
        vipDebitRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "vipDebitRate",
          },
        ],
        vipDebitAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "vipDebitAdd",
          },
        ],
        vipDebitLimit: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "vipDebitLimit",
          },
        ],
        vipCreditRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "vipCreditRate",
          },
        ],
        vipCreditAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "vipCreditAdd",
          },
        ],
        qpayRate: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "qpayRate",
          },
        ],
        qpayAdd: [
          { required: true, message: "不能为空" },
          {
            validator: this.rateCheck,
            message: this.rateMsg,
            key: "qpayAdd",
          },
        ],
      },
      brandP: false,
      brandList: [],
      isSet: true,
      scopeData: rateScopeData, //配置数据
    };
  },
  created() {
    this.$tip.loading("加载中~~~");
    let info = this.$storage.getStore({
      name: "agentRateSet",
    });
    if (info) {
      this.form = JSON.parse(info);
      this.getConfigure();
    }
    // 获取可配置参数
    this.$tip.loaded();
    this.getBrandList();
  },
  methods: {
    handleSure() {
      this.$tip.loading();
      this.$refs["vanForm"].validate().then(() => {
        if (this.form.id) {
          //修改
          updateInfo(this.form).then((response) => {
            this.$tip.loaded();
            if (response.code == 200) {
              this.$dialog
                .alert({
                  message: "修改成功!",
                  theme: "round-button",
                  confirmButtonColor: "#1989fa",
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$tip.toast(response.msg);
            }
          });
        } else {
          //新增
          addInfo(this.form).then((response) => {
            this.$tip.loaded();

            if (response.code == 200) {
              this.$dialog
                .alert({
                  message: "添加成功!",
                  theme: "round-button",
                  confirmButtonColor: "#1989fa",
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$tip.toast(response.msg);
            }
          });
        }
      });
    },
    // 赋值配置参数最大值和最小值
    setMaxMinData(obj) {
      // console.log(this.scopeData);
      for (let i in obj.max) {
        this.scopeData[i].max = obj.max[i];
      }
      for (let i in obj.min) {
        this.scopeData[i].min = obj.min[i];
      }
      // console.log(this.scopeData)
    },
    getUnit(key) {
      if (!this.scopeData[key]) {
        return this.$error("参数缺少");
      }
      let str = `${this.scopeData[key].unit}`;
      return str;
    },
    getStr(key,label) {
      let str
     if (!this.scopeData[key]) {
        return this.$error("参数缺少");
      }
      console.log(arguments[1])
      if(arguments[1]){
        str = `${label}(${this.scopeData[key].min}~${this.scopeData[key].max})`;
      }else{
        str = `输入范围${this.scopeData[key].min}至${this.scopeData[key].max}`;
      }
      return str;
    },
    getBrandList() {
      signInfo({ pageSize: 999 }).then((res) => {
        this.brandList = res.data;
      });
    },
    // 获取成本配置数据
    getConfigure() {
      this.$tip.loading();
      configureList({ brandCode: this.form.brandCode,agentNo:this.form.agentNo }).then((res) => {
        this.$tip.loaded();
        this.setMaxMinData(res.data);
      });
    },
    chooseBrand() {
      this.brandP = true;
    },
    brandChoose(item) {
      this.brandP = false;
      this.form.brandCode = item.brandCode;
      this.form.brandName = item.brandName;
      this.getConfigure();
      //   console.log(item);
    },
    // 校检是否通过
    rateCheck(value, obj) {
      // console.log(value, obj);
      let isPass = true;
      if (!this.form.brandCode) {
        return (isPass = false);
      }
      if (!value) {
        return (isPass = false);
      }
      if (isNaN(value)) {
        isPass = false;
      } else {
        if (
          value <= this.scopeData[obj.key].max &&
          value >= this.scopeData[obj.key].min
        ) {
          isPass = true;
        } else {
          isPass = false;
        }
      }
      return isPass;
    },
    // 不通过返回消息
    rateMsg(value, obj) {
      let str = "";
      // if (!this.form.brandCode) {
      //   return (str = "请先选择品牌!");
      // }
      if (!value) {
        return (str = "不能为空");
      }
      if (isNaN(value)) {
        str = "请输入数字值";
      } else {
        if (
          value <= this.scopeData[obj.key].max &&
          value >= this.scopeData[obj.key].min
        ) {
        } else {
          str = "输入范围有误";
        }
      }
      if (str) {
        return str;
      }
    },
    toInfo() {
      this.$router.push({
        name: "agentRateInfo",
        query: {
          isMyInfo: true,
        },
      });
    },
  },
};
</script>
 <style scoped lang='scss'>
.content {
  padding: R(22) R(25) R(60);
}
.title-s {
  background: linear-gradient(90deg, #e3ecff 0%, #fefeff 100%);
  border-radius: R(10);
}
.title-i {
  margin-bottom: R(30);
  font-size: R(28px);
  font-weight: 400;
  color: #1a1a1a;
}
.brand {
  //   margin-bottom: R(35);
}
/deep/input {
  height: auto;
}
.item-box {
  margin-top: R(26);
}
.input-box {
  border-radius: R(10);
  overflow: hidden;
}
.sure {
  margin-top: R(40);
}
/deep/.van-field--disabled .van-field__label {
  color: #646566 !important;
}
/deep/.van-field__control:disabled {
  color: #646566 !important;
  -webkit-text-fill-color: #646566;
}
/deep/.van-field__label{
  width:auto;
}
</style>